.boton-personalizado {
  background-color:rgb(170, 4, 156);
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.boton-color {
  background-color: #04AA6D; /* Verde */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

/* Variantes de color */
.boton-azul {
  background-color: #008CBA;
}

.boton-rojo {
  background-color: #f44336;
}

.boton-gris {
  background-color: #e7e7e7;
  color: black;
}

.boton-negro {
  background-color: #555555;
}


.boton-tamano {
  background-color: #04AA6D; /* Verde */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
}

/* Tamaños de fuente */
.tamano-10 { font-size: 10px; }
.tamano-12 { font-size: 12px; }
.tamano-16 { font-size: 16px; }
.tamano-20 { font-size: 20px; }
.tamano-24 { font-size: 24px; }


.boton-relleno {
  background-color: #04AA6D; /* Verde */
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

/* Rellenos personalizados */
.relleno-10x24 { padding: 10px 24px; }
.relleno-12x28 { padding: 12px 28px; }
.relleno-14x40 { padding: 14px 40px; }
.relleno-32x16 { padding: 32px 16px; }
.relleno-16    { padding: 16px; }


.boton {
  background-color: #04AA6D; /* Verde */
  border: none;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.redondeo-2 {
  border-radius: 2px;
}

.redondeo-4 {
  border-radius: 4px;
}

.redondeo-8 {
  border-radius: 8px;
}

.redondeo-12 {
  border-radius: 12px;
}

.redondeo-50 {
  border-radius: 50%;
}


.boton {
  background-color: white;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border: 2px solid; /* Para que tome color en cada clase */
}

.borde-verde {
  border-color: #04AA6D;
}

.borde-azul {
  border-color: #008CBA;
}

.borde-rojo {
  border-color: #f44336;
}

.borde-gris {
  border-color: #e7e7e7;
}

.borde-negro {
  border-color: #555555;
}

.boton-hover {
  background-color: #04AA6D; /* Verde por defecto */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

/* Estilos base para los botones con borde y fondo blanco */
.boton-hover-verde {
  background-color: white;
  color: black;
  border: 2px solid #04AA6D;
}

.boton-hover-verde:hover {
  background-color: #04AA6D;
  color: white;
}

.boton-hover-azul {
  background-color: white;
  color: black;
  border: 2px solid #008CBA;
}

.boton-hover-azul:hover {
  background-color: #008CBA;
  color: white;
}

.boton-hover-rojo {
  background-color: white;
  color: black;
  border: 2px solid #f44336;
}

.boton-hover-rojo:hover {
  background-color: #f44336;
  color: white;
}

.boton-hover-gris {
  background-color: white;
  color: black;
  border: 2px solid #e7e7e7;
}

.boton-hover-gris:hover {
  background-color: #e7e7e7;
}

.boton-hover-negro {
  background-color: white;
  color: black;
  border: 2px solid #555555;
}

.boton-hover-negro:hover {
  background-color: #555555;
  color: white;
}


.btn {
  background-color: #04AA6D; /* Verde */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}

/* Botón con sombra estática */
.sombra-estatica {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

/* Botón con sombra al pasar el mouse */
.sombra-al-pasar:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}


.btn-personalizado {
  background-color: #04AA6D; /* Verde */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.btn-desactivado {
  opacity: 0.6;
  cursor: not-allowed;
}


.btn-ancho {
  background-color: #047baa; /* Verde */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.btn-ancho-fijo {
  width: 250px;
}

.btn-ancho-medio {
  width: 50%;
}

.btn-ancho-completo {
  width: 100%;
}

.grupo-botones-borde .btn-borde {
  background-color: #04AA6D;
  border: 1px solid green;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  float:left;
}

.grupo-botones-borde .btn-borde:not(:last-child) {
  border-right: none; /* Evita doble borde */
}

.grupo-botones-borde .btn-borde:hover {
  background-color: #3e8e41;
}

.clearfix {
  clear: both;
}

.contenedor-imagen {
  position: relative;
  width: 100%;
  max-width: 400px;
}

.imagen-fondo {
  width: 100%;
  height: auto;
}

.boton-superpuesto {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #f1f1f1;
  color: black;
  font-size: 16px;
  padding: 16px 30px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
}

.boton-superpuesto:hover {
  background-color: black;
  color: white;
}